import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField'
import IconButton from 'material-ui/IconButton'
import Icon from 'material-ui/Icon'


import Input, { InputLabel, InputAdornment } from 'material-ui/Input';
import { FormControl, FormHelperText } from 'material-ui/Form';
import Visibility from 'material-ui-icons/Visibility';
import VisibilityOff from 'material-ui-icons/VisibilityOff';

const styles = theme => ({
  searchBar: {
    display: 'flex',
    flexDirection: 'row',
    flex: 6,
  },
  searchField: {
  	flex: 1
  },
  textFieldRoot: {
    padding: 0,
    'label + &': {
      marginTop: theme.spacing.unit * 3,
    },
    alignItems: 'center'
  },
  textFieldInput: {
    borderRadius: 1,
    background: theme.palette.common.white,
    fontSize: 14,
    padding: '10px 12px',
    width: 'calc(100% - 24px)',
    transition: theme.transitions.create(['border-color', 'box-shadow']),
    // '&:focus': {
    //   borderColor: 'grey',
    //   boxShadow: '0 0 0 0.15rem rgba(0,0,0,.05)',
    // },
  },
  textFieldFormLabel: {
    fontSize: 18,
  },
  textField: {
  	width: '100%'
  },
  button: {
  	color: 'black',
  	opacity: 0.6,
    height: 39,
    width: 39,
  },
  icon: {
  	fontSize: 22
  }
});

@withStyles(styles)
class SearchBar extends Component {
	constructor(props) {
	  super(props);
	}

	async onClick(e) {
		this.props.clearCourse()
		this.props.clearPagination()
		const res = await this.props.fetchCourse(this.props.searchKey)
		this.props.setCourse(res.data.courses)
		this.props.setPagination(res.data)
    location.hash =`/course/${this.props.searchKey}`
	}

	onKeyDown(e) {
		if(e.keyCode == 13) {
        this.onClick()
        location.hash =`/course/${this.props.searchKey}`
    }
	}

	render() {
  	const {classes, disableUnderLine} = this.props
		return (
			<div className={classes.searchBar}>
					<TextField
		        placeholder="大数据, 机器学习, Python ......"
		        onChange={e => {this.props.setSearchKey(e.target.value)}}
		        InputProps={{
		        	disableUnderline: disableUnderLine,
		          classes: {
		            root: classes.textFieldRoot,
		            input: classes.textFieldInput,
		          },
		          onKeyDown: (e) => this.onKeyDown(e),
              startAdornment: <IconButton onClick={(e) => this.onClick(e)} className={classes.button}>
                              <Icon className={classes.icon}>search</Icon>
                            </IconButton>
		        }}
		        InputLabelProps={{
		          shrink: true,
		          className: classes.textFieldFormLabel,
		        }}
		        className={classes.textField}
		      />
			</div>
		)
	}
}

export default SearchBar